<template>
  <el-card>
    <el-input class="width200" placeholder="名称" v-model="name" clearable></el-input>
    <vk-data-input-select v-model="status" class="width200" clearable :localdata='statusArr'
      placeholder="请选择状态"></vk-data-input-select>
    <el-button type="primary" @click="searchList">查询券包</el-button>
    <el-button type="primary" @click="addCoupon">新增券包</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <!-- <el-table-column prop="_id" label="id">
      </el-table-column> -->
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <!-- <el-table-column prop="images" label="图片">
        <template slot-scope="scope">
          <image :src="scope.row.image" style="width: 30px;height: 30px;cursor: pointer"
            @click="preview(scope.row.image)" />
        </template>
      </el-table-column> -->
      <el-table-column prop="images" label="标签" width="350">
        <template slot-scope="scope">
          <span>{{scope.row.tag_name.length ? JSON.stringify(scope.row.tag_name): ''}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="售价(元)" width="80">
      </el-table-column>
      <el-table-column prop="per_bonus" label="每日分佣" width="80">
      </el-table-column>
      <el-table-column prop="sign_day" label="有效时长(天)" width="80">
      </el-table-column>
      <el-table-column prop="day" label="发放周期" width="80">
      </el-table-column>
      <el-table-column prop="all_price" label="总收益" width="80">
      </el-table-column>
      <el-table-column prop="stock" label="库存" width="60">
      </el-table-column>
      <el-table-column prop="images" label="状态">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.status == 1 ? '#f00':''}">{{scope.row.status == 1 ? '使用中': '已售罄'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="isCoupon" :close-on-click-modal="true" width="60%">
      <el-form ref="form" :model="coupon" label-width="80px">
        <el-form-item label="名称">
          <el-input class="width400" v-model="coupon.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <vk-data-input-select v-model="coupon.type" class="width400" :localdata='tpyeArr'
            :props="{value: 'value', label: 'label'}" placeholder="请选择"></vk-data-input-select>
        </el-form-item>
        <el-form-item label="商品图片">
          <vk-data-upload v-model="coupon.image" :limit="1"></vk-data-upload>
        </el-form-item>
        <el-form-item label="售价">
          <el-input class="width400" type="number" v-model="coupon.price"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input class="width400" v-model="coupon.stock"></el-input>
        </el-form-item>
        <el-form-item label="每日分佣">
          <el-input class="width400" v-model="coupon.per_bonus"></el-input>
        </el-form-item>
        <el-form-item label="发放周期(天/次)">
          <el-input class="width400" v-model="coupon.day"></el-input>
        </el-form-item>
        <el-form-item label="总收益">
          <el-input type="number" class="width400" v-model="coupon.all_price"></el-input>
        </el-form-item>
     <!--   <el-form-item label="联系专员">
          <el-input class="width400" v-model="coupon.contact_mobile"></el-input>
        </el-form-item> -->
        <el-form-item label="有效时长">
          <el-input class="width400" v-model="coupon.sign_day"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <vk-data-input-select v-model="coupon.tag_id" class="width400" :localdata='tagArr' multiple
            placeholder="请选择"></vk-data-input-select>
        </el-form-item>
        <el-form-item label="合同模版">
          <vk-data-input-select v-model="coupon.relate_template" class="width400" :localdata='templateArr' multiple
            :props="{value: '_id', label: 'name'}" placeholder="请选择"></vk-data-input-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="isPreview" :close-on-click-modal="true" width="60%">
      <div style="text-align: center;">
        <image :src="url" />
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        status: '',
        coupon: {
          name: '',
          tag_id: '',
          tag_name: '',
          image: '',
          status: '',
          price: '',
          stock: '',
          status: 1,
          day: '',
          all_price: null,
          per_bonus: '',
          sign_day: '',
          relate_template: [],
          relate_template_arr: [],
          // contact_mobile: '15715152626'
        },
        statusArr: [{
            label: '使用中',
            value: 1
          },
          {
            label: '已下架',
            value: 2
          }
        ],
        isPreview: false,
        url: '',
        currentPage: 1,
        pageNum: 1,
        pageSize: 100,
        total: 0,
        isCoupon: false,
        tableData: [],
        tagArr: [{
            label: '合同签署',
            value: 1
          },
          {
            label: '不限购',
            value: 2
          },
          {
            label: '超长收益',
            value: 3
          },
          {
            label: '邀请有礼',
            value: 4
          },
          {
            label: '年底分红',
            value: 5
          }
        ],
        templateArr: [],
        tpyeArr: [{
            label: '停车券包',
            value: 1
          },
          {
            label: '加油券包',
            value: 2
          },]
      }
    },
    mounted() {
      this.getList()
      this.getTemplateList()
    },
    methods: {
      preview(item) {
        this.url = item
        this.isPreview = true
      },
      addCoupon() {
        this.isCoupon = true
        this.coupon = {
          name: '',
          tags: '',
          image: '',
          status: '',
          price: '',
          per_bonus: '',
          day: '',
          all_price: null,
          stock: '',
          status: 1,
          sign_day: '',
          relate_template: [],
          relate_template_arr: [],
          // contact_mobile: '15715152626'
        }
      },
      getTemplateList() {
        let that = this
        vk.callFunction({
          url: 'user/kh/templateAllget',
          success: (res) => {
            if (res) {
              that.templateArr = res.rows
            }
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val
        this.getList()
      },
      handleEdit(index, row) {
        this.coupon = row
        this.isCoupon = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该商品吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.couponDelete(row)
          }
        });
      },
      couponDelete(row) {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        vk.callFunction({
          url: 'user/kh/couponDelete',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.getList()
            }
          }
        })
      },
      searchList() {
        this.pageNum = 1
        this.getList()
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        let obj = {}
        if (this.name) {
          obj.name = this.name
        }
        if (this.status) {
          obj.status = this.status
        }
        vk.callFunction({
          url: 'user/kh/couponList',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ...obj
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
      onSubmit() {
        uni.showLoading({
          title: '加载中...'
        })
        let str = []
        if (this.coupon.tag_id) {
          for (let i =0;i < this.tagArr.length;i++) {
            if (this.coupon.tag_id.indexOf(this.tagArr[i].value) > -1) {
                str.push(this.tagArr[i].label)
            }
          }
        }
        let arr = []
        if (this.coupon.relate_template) {
          for (let i =0;i < this.templateArr.length;i++) {
            if (this.coupon.relate_template.indexOf(this.templateArr[i]._id) > -1) {
                arr.push({
                  value: this.templateArr[i]._id,
                  label: this.templateArr[i].name
                })
            }
          }
        }
        this.coupon.relate_template_arr = arr
        this.coupon.price = parseFloat(this.coupon.price)
        this.coupon.per_bonus = parseFloat(this.coupon.per_bonus)
        this.coupon.tag_name = str
        vk.callFunction({
          url: 'user/kh/couponPost',
          data: this.coupon,
          success: (res) => {
            if (res) {
              uni.hideLoading()
              console.log(res)
              this.isCoupon = false
              this.getList()
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }

  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }

  .width100 {
    width: 100px
  }

  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    &-name {
      margin-left: 10px;
    }

    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>